<template>
	<view class="container">
		<view class="box1">
			<van-sidebar :active-key="activeKey" @change="onChange">
				<van-sidebar-item title="三月" />
				<van-sidebar-item title="二月" />
				<van-sidebar-item title="一月" />
			</van-sidebar>
		</view>
		<view class="box2">
			<div style="margin-left: 10px;margin-top: 10px;font-weight: 600;">{{yf}}</div>
			<div style="display: flex;flex-wrap: wrap;box-sizing: border-box;padding: 15px;">
				<div style="width: 60px;height: 80px;background-color: #ffffff;margin-right: 10px;margin-bottom: 10px;display: flex;flex-direction: column;"
					v-for="(item,index) in xrsj" :key="index" @click="tzwz(item)">
					<div
						style="flex: 2;color: #a7a7a7;font-size: 30px;display: flex;justify-content: center;align-items: center;">
						{{index+1}}
					</div>
					<div
						style="flex: 1;font-size: 14px;color: #a7a7a7;display: flex;justify-content: center;align-items: center;box-sizing: border-box;padding-bottom: 5px;">
						{{item.title}}
					</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mtsj: [],
				activeKey: 0,
				xrsj: [],
				yf: ''
			}
		},
		methods: {
			onChange(value) {
				console.log(value.detail);
				if (value.detail == 0) {
					this.xrsj = this.mtsj[3]
					this.yf = '三月'
				}
				if (value.detail == 1) {
					this.xrsj = this.mtsj[2]
					this.yf = '二月'
				}
				if (value.detail == 2) {
					this.xrsj = this.mtsj[1]
					this.yf = '一月'
				}
			},
			tzwz(item) {
				uni.navigateTo({
					url: '/pages/wenzhang/wenzhang?item=' + JSON.stringify(item)
				});
			}
		},
		onLoad() {
			let that = this;
			uni.getStorage({ // 获取本地数据
				key: 'arr', // 键名
				success: function(res) { // 成功回调
					that.mtsj = res.data; // 赋值给变量
					// let map = {
					// 	1: "一月",
					// 	2: "二月",
					// 	3: "三月",
					// 	4: "四月",
					// 	5: "五月",
					// 	6: "六月",
					// 	7: "七月",
					// 	8: "八月",
					// 	9: "九月",
					// 	10: "十月",
					// 	11: "十一月",
					// 	12: "十二月"
					// };
					// // 遍历对象的属性，用映射表替换属性名字
					// for (let key in that.mtsj) {
					// 	// 如果映射表里有这个属性名字，就替换它
					// 	if (map[key]) {
					// 		// 先保存原来的属性值
					// 		let value = that.mtsj[key];
					// 		// 删除原来的属性
					// 		delete that.mtsj[key];
					// 		// 添加新的属性，用映射表里的名字和原来的值
					// 		that.mtsj[map[key]] = value;
					// 	}
					// }
					console.log(res.data); // 打印数据
					that.xrsj = that.mtsj[3]
					console.log(that.xrsj)
					that.yf = '三月'
				}
			});
		},
	}
</script>

<style lang="less">
	body {
		width: 100%;
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100%;
	}

	.box1 {
		flex: 1;
		background-color: #f7f8fa;
	}

	.box2 {
		flex: 3;
		background-color: #dcdddf;
		overflow: auto;
	}
</style>
